<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/public/common.css"/>
		<title></title>
	</head>
	<style>
		/*html,body{height: 100%;}*/
		#myCanvas{width: 90%;margin: 5% 5%;}
	</style>
	<body>
		<canvas id="myCanvas" height="470">你的浏览器不支持canvas!</canvas>
	</body>
	<script>
		
/*		var xhr;
		var url;
		if (window.XMLHttpRequest){
			
		    xhr=new XMLHttpRequest();
		}else{			
			
		    xhr=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xhr.onreadystatechange=function() {
		 
		  	if (xhr.readyState==4 && xhr.status==200){
		    
		    	data=xhr.responseText;
		    }
		} 
		xhr.open("GET",url,true);
		xhr.send();*/

			

	
		
		var canvas = document.getElementById("myCanvas")
		var ctx = canvas.getContext("2d");		
		canvas.width = document.documentElement.clientWidth;

		
		//绘画家谱结构
			
		ctx.clearRect(0,0,canvas.width,470);			
		//最外层
		ctx.beginPath();
		ctx.strokeStyle = "#000000";
		ctx.lineWidth = 8;
		ctx.strokeRect(0,0,canvas.width,470);
		ctx.stroke();
		ctx.closePath();
		//内层	
		ctx.beginPath();
		ctx.strokeStyle = "#000000";
		ctx.lineWidth = 2;
		ctx.strokeRect(10,10,canvas.width-20,450);
		ctx.stroke();
		ctx.closePath();
		//竖线
		ctx.beginPath();		
		ctx.moveTo(canvas.width/2-25,10);
		ctx.lineTo(canvas.width/2-25,460);
		ctx.moveTo(canvas.width/2+25,10);
		ctx.lineTo(canvas.width/2+25,460);
		ctx.stroke();
		ctx.closePath();
		
		//红色横线
		for(var i = 0 ;i < 4 ; i++){
			if (i>0) {
				ctx.beginPath();
				ctx.strokeStyle = "red";
				ctx.lineWidth = 2;
				ctx.moveTo(10,150*i);
				ctx.lineTo(canvas.width/2-25,150*i);
				ctx.moveTo(canvas.width/2+25,150*i);
				ctx.lineTo(canvas.width-10,150*i);
				ctx.stroke();
				ctx.closePath();			
			} else{
				ctx.beginPath();
				ctx.strokeStyle = "red";
				ctx.lineWidth = 2;
				ctx.moveTo(10,20);
				ctx.lineTo(canvas.width/2-25,20);			
				ctx.moveTo(canvas.width/2+25,20);
				ctx.lineTo(canvas.width-10,20);
				ctx.stroke();
				ctx.closePath();
			}
			
		}		
					
		ctx.beginPath();
		
		ctx.fillStyle = "#000000";
		ctx.font = "bold 25px 仿宋";
		ctx.fillText("张",canvas.width/2-12,50);
		ctx.fillText("氏",canvas.width/2-12,80);		
		ctx.fillText("族",canvas.width/2-12,110);		
		ctx.fillText("谱",canvas.width/2-12,140);
						


		//测试数据
		var jsData = [		
    
	    	{fNum: [
	    		{name:"张翠山",ux:[{name:"殷素素"}]}
	    		]
	    	},
	    	{fNum: [
	    		{name:"张无忌",ux:[{name:"赵敏"}]},
	    		{name:"张骞"},
	    		{name:"张震"},
	    		{name:"张作霖"},
	    		{name:"张庭之"},
	    		{name:"张晓"},
	    		]
	    	},
	    	{fNum: [
	    		{name:"张学良",ux:[{name:"胡大姐"}]},
	    		]
	    	}
	    ];
	    console.log(jsData[0].fNum[0].ux);
	    /**
	     * 绘画家族成员
	     * jsData 家族成员数据
	     * */
		var generNum = jsData.length;

		   
		//第几世
		
		ctx.fillStyle = "#000000";
		ctx.font = "30px 仿宋";
		ctx.fillText("第",canvas.width-55,65);
		ctx.fillText("一",canvas.width-55,95);
		ctx.fillText("世",canvas.width-55,125);

		ctx.fillStyle = "#000000";
		ctx.font = "lighter 15px 宋体 ";
		ctx.fillText("始",canvas.width-90,40);
		ctx.fillText("祖",canvas.width-90,60);
		ctx.fillText("张",canvas.width-90,90);
		ctx.fillText("忠",canvas.width-90,110);		
		ctx.fillText("华",canvas.width-90,130);		
		
		ctx.fillText("配",canvas.width-120,40);
		ctx.fillText("李",canvas.width-120,90);
		ctx.fillText("氏",canvas.width-120,110);		
		
		
		//第二世
					
		ctx.fillStyle = "#000000";
		ctx.font = "30px 仿宋";
		ctx.fillText("第",canvas.width-55,195);
		ctx.fillText("二",canvas.width-55,225);
		ctx.fillText("世",canvas.width-55,255);
		
		ctx.fillStyle = "#000000";
		ctx.font = "lighter 15px 宋体 ";
		ctx.fillText("之",canvas.width-90,170);
		ctx.fillText("子",canvas.width-90,190);
		ctx.fillText("张",canvas.width-90,220);
		ctx.fillText("小",canvas.width-90,240);		
		ctx.fillText("华",canvas.width-90,260);		
		ctx.beginPath();

		
	</script>
</html>
